<template>
  <contractLayout>
    <!-- 合同列表 -->
    <template slot="left">
      <contractList :pageInfo="contract.pager" placeholder="请输入物业名称" searchName="projectName" v-loading="contract.loading" element-loading-text="数据加载中...">
        <ul class="contractList">
          <li v-for="item in contract.tableData" :key="item.lessorContractId" :class="{active: item.active}" @click="changeAccountList(item.lessorContractId)">
            <div class="top">
              <div class="title">{{item.propertyNames}}</div>
              <span class="btn" @click.stop="$refs.contractView.show(item.lessorContractId)">查看合同</span>
            </div>
            <el-row>
              <el-col :span="8">建筑面积</el-col>
              <el-col :span="16">{{item.buildingArea}}㎡</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">物业名称</el-col>
              <el-col :span="16">{{item.propertyNames}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">物业地址</el-col>
              <el-col :span="16">{{item.address}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">合同期限</el-col>
              <el-col :span="16">{{item.startDate}}至{{item.endDate}}</el-col>
            </el-row>
          </li>
        </ul>
      </contractList>
    </template>
    <!-- 费用列表 -->
    <div class="accountWarp" v-loading="account.loading" element-loading-text="数据加载中...">
      <dataList
        placeholder="搜索项目名称"
        :pageInfo="account.pager"
        :listData="account.tableData"
        :selectData="account.selectDataArr"
        searchName="projectName"
        :filterList="account.filterList"
        openSelection
        :menuList="[]"
        :listLayout="['menu','filter']"
      >
        <el-table ref="multipleTable" :data="account.tableData" @selection-change="$event => (account.selectDataArr = $event)">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="费用周期" align="center">
            <template slot-scope="scope">{{scope.row.costPeriodStart}} 至 {{scope.row.costPeriodEnd}}</template>
          </el-table-column>
          <el-table-column label="付款项目" width="170" align="center" prop="chargeProjectName" />
          <el-table-column label="合同月租金(元)" width="170" align="center" prop="lessorAmount" />
          <el-table-column label="应付调整金额(元)" width="170" align="center" prop="adjustmentAmount" />
          <el-table-column label="本月应付金额(元)" width="170" align="center" prop="payableMoney" />
          <el-table-column label="操作" align="center" class="operaColumn" width="200">
            <template slot-scope="scope">
              <el-button type="text" style="--color:#666666" size="mini" @click="handleBtnClick('preview',scope.row)" v-if="scope.row.check_status != '02'">租金核算</el-button>
              <el-button
                type="text"
                style="--color:#F56C6C"
                size="mini"
                @click="handleBtnClick('approval',scope.row)"
                v-if="scope.row.adjustmentStatus == '02'"
              >应付调整审核</el-button>
              <el-button type="text" style="--color:#409EFF" size="mini" @click="handleBtnClick('edit',scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </dataList>
    </div>
    <!-- 合同展示组件 -->
    <contract-view ref="contractView" />
  </contractLayout>
</template>

<script>
import dataList from '@/components/dataList'
import contractView from "@/views/wy-lessor/rentalSociety/views/contract/view.vue"
import { getContractList, getAccountList } from '@/views/wy-lessor/landlord/api/account'
export default {
  components: {
    dataList,
    contractView
  },
  provide () {
    return {
      // 更新核算列表
      initList: this.getAccountList,
      // 更新合同列表
      updateList: this.getContractList,
    };
  },
  beforeMount () {
    this.getContractList()
  },
  data () {
    return {
      // 合同列表请求参数
      contract: {
        // 列表数据
        tableData: [],
        // 请求参数
        params: {
          current: 1,
          size: 10,
          projectName: ''
        },
        // 分页
        pager: {
          total: 0, // 总页数
          current: 1, // 当前页数
          size: 10 // 每页显示多少条 
        },
        // 页面loading
        loading: false,
      },
      // 核算列表请求参数
      account: {
        // 筛选列表
        filterList: [
          { label: '付款项目', inputType: 'dict', dictName: "charge_project_type", name: 'chargeProjectName', multiple: true },
          { label: '费用周期', inputType: 'date', name: 'costPeriodStart' },
          { label: '应收日期', inputType: 'daterange', name: 'receivableDate' },
          { label: '结算状态', inputType: 'radio', name: 'payStatus', children: [{ label: '未支付', value: '01' }, { label: '已支付', value: '02' }] },
          { label: '发送状态', inputType: 'select', name: 'sendStatus', children: [{ label: '未确认', value: '01' }, { label: '已发送', value: '02' }, { label: '待发送', value: '03' }] },
        ],
        // 表格列表数据
        tableData: [],
        // 请求参数
        params: {
          current: 1,
          size: 10,
          projectName: ''
        },
        // 选中的数据
        selectDataArr: [],
        // 分页
        pager: {
          total: 0, // 总页数
          current: 1, // 当前页数
          size: 10 // 每页显示多少条 
        },
        // 页面loading
        loading: true,
      }
    }
  },
  methods: {
    // 切换核算列表
    changeAccountList (lessorContractId) {
      this.contract.tableData = this.contract.tableData.map(item => ({ ...item, active: item.lessorContractId == lessorContractId }))
      this.getAccountList({ lessorContractId, current: 1 })
    },
    // 按钮点击监听
    handleBtnClick () {

    },
    // 获取合同列表
    getContractList (params = {}) {
      this.contract.loading = true
      let requestData = { ...this.contract.params, ...params }
      getContractList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.contract.tableData = records.map((item, index) => ({ ...item, active: index === 0 }))
        this.contract.params = requestData
        this.contract.pager = { total, current, size }
        // 获取核算列表
        records.length > 0 ? this.getAccountList({ lessorContractId: records[0].lessorContractId }) : this.account.loading = false
      }).catch(() => {
        this.account.loading = false
      }).finally(() => {
        this.contract.loading = false
      })
    },
    // 获取核算列表
    getAccountList (params = {}) {
      this.account.loading = true;
      let requestData = { ...this.account.params, ...params };
      if (!requestData.lessorContractId) return;
      getAccountList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.account.tableData = records
        this.account.params = requestData
        this.account.pager = { total, current, size }
      }).finally(() => {
        this.account.loading = false
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.contractList {
  li {
    position: relative;
    padding: 15px 20px;
    border-top: 1px solid rgba(97, 106, 120, 0.07);
    transition: all 0.3s linear;
    cursor: pointer;
    &:after {
      content: "";
      width: 1px;
      height: 100%;
      position: absolute;
      transition: all 0.3s linear;
      right: 0;
      top: 0;
    }
    &.active {
      background-color: #e1f7ff;
      &:after {
        background-color: #1563d1;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      .title {
        color: #000;
        font-weight: bold;
        max-width: calc(100% - 5em);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn {
        cursor: pointer;
        color: #409eff;
      }
    }
    .el-row {
      margin-top: 10px;
      color: #888;
      .el-col {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.accountWarp {
  padding: 0 20px;
  /deep/ .inputItem .label {
    margin-right: 10px;
  }
  /deep/ .el-date-editor {
    &.el-range-editor {
      width: 78%;
    }
    .el-range-input {
      width: 35%;
    }
    .el-range-separator {
      width: 11%;
    }
  }
}
</style>